<!-- 面包屑导航 -->
<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item v-for="item in breadcrumbs" :key="item.path" :to="item.path">
      {{ item.title }}
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const breadcrumbs = ref([])

// 路由映射表
const routeMap = {
  '/volunteer': '志愿者管理',
  '/activity': '活动管理',
  '/activity/list': '活动列表',
  '/activity/record': '签到记录',
  '/organization': '组织管理',
  '/statistics': '统计分析'
}

// 更新面包屑
const updateBreadcrumbs = () => {
  const matched = route.matched
  breadcrumbs.value = matched.map(item => ({
    path: item.path,
    title: routeMap[item.path] || item.meta?.title || '未知页面'
  }))
}

// 监听路由变化
watch(() => route.path, updateBreadcrumbs, { immediate: true })
</script>

<style scoped>
.el-breadcrumb {
  line-height: 60px;
}
</style> 